<template>
	<view>
		<barHeight></barHeight>
		<swiperSearch :topList="topList" name="Busiess"></swiperSearch>
		<zjcscrollnav :platformList="list.category" type="Busiess"></zjcscrollnav>
		<view class="new-box">
			<view class="">
				<image src="/static/bizcircles/new_icon.png" mode=""></image>
			</view>
			<u-notice-bar mode="vertical" icon="" :text="textList" color="#999" direction="column" bg-color='#fff'>
			</u-notice-bar>
		</view>
		<view class="apply" @click="goinfo">
			<image src="/static/information/box.png" mode="widthFix"></image>
			<view class="text">
				<view class="s">{{ $t('release.PROPOSE') }}</view>
				<view class="x">{{ $t('release.MyTalents') }}</view>
			</view>
		</view>
		<view class="topnews">
			<view class="title">
				<image src="/static/news/hot_icon.png" mode="widthFix"></image>
				<text>{{$t('Business.Talent')}}</text>
			</view>
			<view class="topnews-cont">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view class="scroll-view-item" v-for="item in recommend" @click="godetails(item.shopId)">
						<image :src="item.cover" mode=""></image>
						<view class="tc ellipsis">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!--#ifdef APP -->
		<u-sticky offset-top="20">
			<!--#endif-->
			<view class="tab-box">
				<view class="tab">
					<view :class="index==0?'lan':'hei'" class="color3" @click="tab(0)">
						{{ $t('Business.Nearest') }}
						<view class="xian" v-if="index==0"></view>
					</view>
					<view :class="index==1?'lan':'hei'" class="color3" @click="tab(1)">
						{{ $t('Business.TotalViewed') }}
						<view class="xian" v-if="index==1"></view>
					</view>
					<view :class="index==2?'lan':'hei'" class="color3" @click="tab(2)">
						{{ $t('Business.Lastest') }}
						<view class="xian" v-if="index==2"></view>
					</view>
				</view>
			</view>
			<!--#ifdef APP -->
		</u-sticky>
		<!--#endif-->
		<view class="">
			<bizlist :list="infoList"></bizlist>
		</view>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
		<orange-fullloading v-if="isshow" text="loding..."></orange-fullloading>
	</view>
</template>


<script>
	import swiperSearch from "@/components/swiper-search.vue"
	import zjcscrollnav from "@/components/zjc-scroll-nav.vue"
	import bizlist from "@/components/bizlist.vue"
	export default {
		components: {
			swiperSearch,
			zjcscrollnav,
			bizlist
		},
		data() {
			return {
				isshow: true,
				current: 0,
				index: 0,
				scrollTop: 0,
				topList: [],
				recommend: [],
				list: [],
				textList: [],
				infoList: []
			}
		},
		onPullDownRefresh() {
			this.init()
			this.getInfo(this.index)
		},
		onShow() {
			this.init()
			this.getInfo(0)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			goinfo(){
				uni.navigateTo({
					url: '/pages/Business/dayareleasei/index'
				})
			},
			godetails(id){
				console.log(id)
				uni.navigateTo({
					url: '/pages/Business/details/index?id=' + id
				})
			},
			tab(e) {
				this.index = e
				this.getInfo(e)
			},
			init() {
				const params = {
					map: 'applet_city_shop_page'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.topList = res.data.data.slide
						this.list = res.data.data
						this.recommend = res.data.data.recommend
						this.list.newShop.map(item => {
							this.textList.push(item.name)
						})
					} else {

					}
				})
				const params1 = {
					map: 'applet_city_index',
				}
				this.$Request({
					method: 'GET',
					data: params1
				}).then(res => {
					if (res.data.ec == 200) {
						this.cateList = res.data.data
					} else {

					}
				})
			},
			getInfo(type) {
				let typeName
				switch (+type) {
					case 0:
						typeName = 'nearby'
					case 1:
						typeName = 'hot'
						break
					case 2:
						typeName = 'new'
						break
				}
				const params = {
					map: 'applet_city_new_shop_list',
					type: typeName,
					page: 0,
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data
						uni.stopPullDownRefresh()
						this.isshow = false
					} else {
						uni.stopPullDownRefresh()
						this.isshow = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.new-box {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx 10rpx 30rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.tab-box {
		border-bottom: 1px solid #e2e4e6;
		padding: 20rpx 0;
		margin-top: 10rpx;
		background-color: #FFFFFF;

		.tab {
			padding: 0 60rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 600;
		}

		.lan {
			color: #2497ff;
		}

		.hei {
			color: #333333;
		}

		.xian {
			width: 60%;
			height: 10rpx;
			background-color: #2497ff;
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 100%);
		}

	}

	.tab>view {
		position: relative;
	}

	.apply {
		position: fixed;
		background-color: #39b8ff;
		background: linear-gradient(#56f0ee, #4dd8ca);
		right: 0;
		bottom: 48.5%;
		color: #FFFFFF;
		padding: 4rpx 20rpx;
		border-radius: 40rpx 0 0 40rpx;
		font-style: oblique;
		display: flex;
		justify-content: space-between;
		opacity: 0.7;
		z-index: 9999;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}

		.text {
			text-align: center;

			.s {
				font-size: 26rpx;
				font-weight: bold;
			}

			.x {
				font-size: 22rpx;
				border-top: 1px solid #FFFFFF;
			}
		}
	}

	.topnews {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.title {
			padding: 10rpx 0;
			text-align: center;

			image {
				width: 30rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 32rpx;
				font-weight: 600;
			}
		}

		.topnews-cont {
			scroll-view {
				height: 200rpx;
				overflow-x: scroll;
				white-space: pre-wrap;

				.scroll-view-item {
					display: inline-block;
					width: 23%;
					height: 100%;
					margin-top: 10rpx;
					vertical-align: bottom;

					.tc {
						font-size: 26rpx;
						width: 160rpx;
						height: 80rpx;
						margin-top: 10rpx;
						text-align: center;
					}

					image {
						width: 115rpx;
						height: 115rpx;
						border-radius: 50%;
						box-shadow: 0rpx 20rpx 30rpx 0rpx #c5c5c5;
						margin: 0 auto;
						display: block;
						border: 4rpx solid #FFFFFF;
					}
				}

			}
		}
	}
</style>
